<template>
  <div class="page-header">
    <h2>首页</h2>
  </div>
  <a-card class="page-container">
    <!-- 1.在线服务器 -->
    <OnlineVm :lastData="lastData" />
    <VmMetric :lastData="lastData" :cpuUsage="cpuUsage"></VmMetric>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { lastIndexes,lastCpuUsage } from '@/apis/indexApis.js';
import OnlineVm from '@/components/OnlineVm.vue';
import VmMetric from '@/components/VmMetric.vue';

const lastData = ref([]);
const cpuUsage = ref([]);

onMounted(() => {
  lastIndexes({}).then(v => {
    lastData.value = v.data;
  }).catch(error => {
    console.error('lastIndexes,数据获取失败:', error);
  });
  lastCpuUsage({}).then(v=>{
    cpuUsage.value = v
  }).catch(error => {
    console.error('lastIndexes,数据获取失败:', error);
  });
});
</script>

<style lang="less" scoped>

.page-header {
  margin: 8px 10px;
}

.page-container {
  margin: 8px 10px;
  min-height: 80vh;
}
</style>
